<template>
  <div class="glb-style-container">
    <span class="glb-style-title"> 动态调整glb/gltf样式风格</span>
    <div class="glb-style-section">
      <span class="glb-style-item"> 模型颜色</span>
      <div class="glb-color">
        <span>颜色模式</span>
        <el-select v-model="colorBlendMode" placeholder="请选择模式" @change="changeColorMode">
          <el-option label="高亮" value="HIGHLIGHT"></el-option>
          <el-option label="替换" value="REPLACE"></el-option>
          <el-option label="混合" value="MIX"></el-option>
        </el-select>
      </div>
      <div class="glb-color">
        <span>颜色</span>
        <pick-colors v-model:value="glbColor" @change="changeGlbColor" />
      </div>
      <div class="glb-color">
        <span>不透明度</span>
        <el-slider v-model="colorAlphaValue" :min="0" :max="1" :step="0.01" @input="changeGlbColor" />

      </div>
      <div class="glb-color">
        <span>混合系数</span>
        <el-slider :disabled="colorBlendMode != 'MIX'" v-model="colorMixValue" :min="0" :max="1" :step="0.01"
          @input="changeMixValue" />

      </div>
    </div>
    <div class="glb-style-section">
      <span class="glb-style-item"> 模型轮廓线</span>
      <div class="glb-color">
        <span>颜色</span>

        <pick-colors v-model:value="glbSilhouetteColor" @change="changeSilhouetteColor" />
      </div>
      <div class="glb-color">
        <span>宽度</span>
        <el-slider v-model="silhouetteWidthValue" :min="0" :max="10" :step="0.01" @input="changeSilhouetteWidth" />

      </div>
    </div>
  </div>

</template>

<script setup lang="ts">


import CesiumViewer from '@/Viewer/CesiumViewer'
import { Cartesian3, HeadingPitchRoll, Transforms, Viewer, Color, Math as CesiumMath, ColorBlendMode, ConstantProperty } from 'cesium'
import PickColors from 'vue-pick-colors'

const viewer = CesiumViewer.viewer


const colorBlendMode = ref("HIGHLIGHT")
const glbColor = ref("#F2EFEF")
const colorAlphaValue = ref(1.0)
const colorMixValue = ref(0.5)

const glbSilhouetteColor = ref("#00ff00")
const silhouetteWidthValue = ref(4.0)

const getColor = (colorCss: string, alpha: number) => {
  const color = Color.fromCssColorString(colorCss)
  return Color.fromAlpha(color, alpha);
}


const getColorBlendMode = () => {
  return ColorBlendMode[colorBlendMode.value as keyof typeof ColorBlendMode]
}

const createModel = (viewer: Viewer, url: string,lon:number,lat:number, height: number) => {
  viewer.entities.removeAll();

  const position = Cartesian3.fromDegrees(
    // 110.314,
    // 22.543,
    lon,
    lat,
    height,
  );
  const heading = CesiumMath.toRadians(135);
  const pitch = 0;
  const roll = 0;
  const hpr = new HeadingPitchRoll(heading, pitch, roll);
  const orientation = Transforms.headingPitchRollQuaternion(
    position,
    hpr,
  );

  let entity = viewer.entities.add({
    name: url,
    position: position,
    orientation: orientation,
    model: {
      uri: url,
      minimumPixelSize: 128,
      maximumScale: 20000,
      color: getColor(glbColor.value, colorAlphaValue.value),
      colorBlendMode: getColorBlendMode(),
      colorBlendAmount: colorMixValue.value,
      silhouetteColor: getColor(
        glbSilhouetteColor.value,
        1.0,
      ),
      silhouetteSize: silhouetteWidthValue.value,
    },
  });
  // viewer.trackedEntity = entity;
 viewer?.camera.flyTo({
      destination: Cartesian3.fromDegrees(lon, lat, height*10)
    });
  return entity;
}


const targetEntity = createModel(viewer!, "/testdata/CesiumMilkTruck.glb",110.314,22.543,163)

const changeGlbColor = () => {
  if (targetEntity) {
    targetEntity.model!.color = new ConstantProperty(getColor(glbColor.value, colorAlphaValue.value))
  }
}

const changeMixValue = () => {
  if (targetEntity) {
    targetEntity.model!.colorBlendAmount = new ConstantProperty(colorMixValue.value)
  }
}
const changeSilhouetteColor = () => {
  if (targetEntity) {
    targetEntity.model!.silhouetteColor = new ConstantProperty(getColor(glbSilhouetteColor.value, 1.0))
  }

}

const changeColorMode = () => {
  if (targetEntity) {
    targetEntity.model!.colorBlendMode = new ConstantProperty(getColorBlendMode())
  }
}
const changeSilhouetteWidth = () => {
  if (targetEntity) {
    targetEntity.model!.silhouetteSize = new ConstantProperty(silhouetteWidthValue.value)
  }
}
onBeforeUnmount(() => {
  viewer!.entities.removeAll()
})
</script>

<style lang="scss" scoped>
.glb-style-container {

  padding: 10px;

  .glb-style-title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .glb-style-section {
    text-align: left;

    .glb-style-item {
      font-size: 14px;
      // margin-bottom: 5px;
      font-weight: bold;
      color: rgb(13, 233, 149);

    }

    .glb-color {
      display: flex;
      align-items: center;
      // margin-top: 5px;
      text-align: left;

      span {
        width: 50px;
        font-size: 12px;
        margin-right: 10px;

      }

      .el-select {
        flex: 1;
      }

      .el-slider {
        flex: 1;
      }

    }

  }
}
</style>
